<template>
  <div class="gm-info">
    <div class="form">
      <div class="label">
        <h3>创建个人资料</h3>
      </div>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-upload
          class="upload-demo"
          action
          list-type="picture"
          :http-request="addAttachment"
          :limit="limitNum"
          :before-upload="beforeAvatarUpload"
        >
          <el-button slot="trigger" size="small" type="primary">头像图片上传</el-button>
        </el-upload>
        <el-form-item label="您的姓名" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="出生日期" required>
          <el-col :span="11">
            <el-form-item prop="date">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="ruleForm.date"
                style="width: 100%;"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label="您的性别" prop="sex">
          <el-radio-group v-model="ruleForm.sex">
            <el-radio label="男"></el-radio>
            <el-radio label="女"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="工作职位" prop="work">
          <el-input v-model="ruleForm.work"></el-input>
        </el-form-item>
        <el-form-item label="现处地址" prop="address">
          <el-input type="textarea" v-model="ruleForm.address"></el-input>
        </el-form-item>
        <el-form-item label="是否保密" prop="secrecy">
          <el-switch v-model="ruleForm.secrecy"></el-switch>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState } from "Vuex";
import { userUrl } from "@/public/uri.js";
export default {
  name: "gm-info",
  data() {
    return {
      ruleForm: {
        name: "",
        sex: "",
        date: "",
        secrecy: false,
        work: "",
        address: ""
      },
      limitNum: 1,
      fileData: {},
      rules: {
        name: [
          { required: true, message: "请输入您的名字", trigger: "blur" },
          { min: 1, max: 8, message: "长度在 1 到 8 个字符", trigger: "blur" }
        ],
        date: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change"
          }
        ],
        sex: [{ required: true, message: "请选择性别", trigger: "change" }]
      }
    };
  },
  methods: {
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/png" || file.type === "image/jpeg";
      const isLt1M = file.size / 1024 / 1024 < 1;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG/PNG 格式!");
      }
      if (!isLt1M) {
        this.$message.error("上传头像图片大小不能超过 1MB!");
      }
      return isJPG && isLt1M;
    },
    addAttachment(file) {
      this.fileData = file.file;
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let fileFormData = new FormData();
          fileFormData.append("image", this.fileData);
          fileFormData.append("name", this.ruleForm.name);
          fileFormData.append("sex", this.ruleForm.sex);
          fileFormData.append("date", this.ruleForm.date);
          fileFormData.append("secrecy", this.ruleForm.secrecy);
          fileFormData.append("work", this.ruleForm.work);
          fileFormData.append("address", this.ruleForm.address);
          fileFormData.append("userName", this.userName);

          this.setUserInfoData(fileFormData)
            .then(res => {
              if (res.data.ok === 1) {
                this.$alert(res.data.data);
                this.resetForm("ruleForm");
                this.$router.push("/users/ps_info");
                this.getUserInfoData(this.userName);
              }
            })
            .catch(err => {
              console.log("错误提示：" + err);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    ...mapActions("user", ["getUserInfoData", "setUserInfoData"])
  },
  computed: {
    ...mapState("user", ["userName"])
  }
};
</script>

<style lang="sass" scoped>
@import '@/assets/default.sass'
.gm-info
  width: 100%
  height: 100%
  @include flex(center,center)
  .form
    width: 95%
    height: 95%
    padding: 5%
    background-color: #fff
    .label
      width: 100%
      height: 40px
      border-bottom: 1px solid #dcdcdc
    .el-form
      margin-top: 10px
      height: 100px
</style>

<style lang="sass">
@import '@/assets/default.sass'
.gm-info
  .form
    .el-form
      .upload-demo
        height: 100px
        margin-bottom: 20px
        overflow: hidden
        @include flex(flex-start,flex-start)
        .el-upload
          flex: 0 0 100px
          height: 100%
          .el-button
            width: 100%
            height: 100%
        .el-upload-list
          flex: 0 0 300px
          height: 100%
          margin: 0 0 0 20px
          padding: 0
          >li
            margin: 0
            height: 100%
</style>